
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员页面</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/admin.css">
</head>
<body class="body1">
<!--Vue对象通过id绑定一个div，该div包裹的部分就是Vue的作用范围-->
<div id="app">
    <!--页头大标题，用户欢迎标识，退出按钮-->
    <div class="header">
        <span style="font-size: 30px; margin-left: 40px;">管理员页面</span>
        <span style="margin-left: 1200px;margin-top: -10px;font-size: 16px; "> {{user.netName}}</span>
        <span style="font-size: 16px">欢迎您！</span>
        <el-link type="primary" :underline="false"
                 style="margin-top: -5px;font-size: 15px" @click="signOut">退出登录</el-link>
    </div>


    <h2>订单数据</h2>

    <!--订单数据的条件搜索表单-->

    <el-form :inline="true" :model="pagination" class="select">
        <el-form-item label="订单编号">
            <el-input v-model="pagination.id" placeholder="唯一"></el-input>
        </el-form-item>
        <el-form-item label="客户编号">
            <el-input v-model="pagination.userId" placeholder="不唯一"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名">
            <el-input v-model="pagination.userName" placeholder="不唯一"></el-input>
        </el-form-item>
        <el-form-item label="客户电话">
            <el-input v-model="pagination.phoneNum" placeholder="不唯一"></el-input>
        </el-form-item>
        <el-form-item label="需求量">
            <el-input v-model="pagination.cliNeeds" placeholder="单位：t"></el-input>
        </el-form-item>
        <el-form-item label="地址横坐标">
            <el-input v-model="pagination.cliX" placeholder="单位：km"></el-input>
        </el-form-item>
        <el-form-item label="地址纵坐标">
            <el-input v-model="pagination.cliY" placeholder="单位：km"></el-input>
        </el-form-item>
        <el-form-item label="最早收货时间">
            <el-input v-model="pagination.cliStart" placeholder="单位：h"></el-input>
        </el-form-item>
        <el-form-item label="最晚收货时间">
            <el-input v-model="pagination.cliEnd" placeholder="单位：h"></el-input>
        </el-form-item>
        <el-form-item label="订单价格">
            <el-input v-model="pagination.price" placeholder="单位：￥"></el-input>
        </el-form-item>
        <el-form-item label="到达时间">
            <el-input v-model="pagination.arrivalTime" placeholder="单位：h"></el-input>
        </el-form-item>
        <el-form-item label="超时赔付">
            <el-input v-model="pagination.compensation" placeholder="单位：￥"></el-input>
        </el-form-item>
        <el-form-item label="运输状态">
            <el-input v-model="pagination.state" placeholder="运输状态"></el-input>
        </el-form-item>
        <el-form-item label="配送员编号">
            <el-input v-model="pagination.driverId" placeholder="配送员编号"></el-input>
        </el-form-item>
        <el-form-item label="配送员姓名">
            <el-input v-model="pagination.driverName" placeholder="配送员姓名"></el-input>
        </el-form-item>
        <el-form-item label="配送员电话">
            <el-input v-model="pagination.driverPhone" placeholder="配送员电话"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="needsPage()" class="inquire">查&nbsp&nbsp&nbsp&nbsp询</el-button>
        </el-form-item>
    </el-form>
    <!--修改订单数据对话框表单-->
    <el-dialog title="修改订单" :visible.sync="dialogVisibleEdit" width="30%">
        <el-form ref="form" :model="needs" label-width="100px" class="insert">
            <el-form-item label="客户编号:">
                <el-input v-model="needs.userId" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="客户姓名:">
                <el-input v-model="needs.userName" placeholder="可填网名"></el-input>
            </el-form-item>
            <el-form-item label="联系电话:">
                <el-input v-model="needs.phoneNum" placeholder="不唯一"></el-input>
            </el-form-item>
            <el-form-item label="需求量:">
                <el-input v-model="needs.cliNeeds" placeholder="单位：t"></el-input>
            </el-form-item>
            <el-form-item label="地址横坐标:">
                <el-input v-model="needs.cliX" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="地址纵坐标:">
                <el-input v-model="needs.cliY" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="最早收货时间:">
                <el-input v-model="needs.cliStart" placeholder="单位：h"></el-input>
            </el-form-item>
            <el-form-item label="最晚收货时间:">
                <el-input v-model="needs.cliEnd" placeholder="单位：h"></el-input>
            </el-form-item>
            <el-form-item label="备注信息:">
                <el-input type="textarea" v-model="needs.remark"></el-input>
            </el-form-item>
            <el-form-item label="订单价格:" >
                <el-input v-model="needs.price" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="needModify()">确定</el-button>
                <el-button @click="cancel()" class="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--订单数据表格-->
    <div class="table">
        <el-table :data="tableData" size="small" current-row-key="id" :header-cell-style="{color:'#2F4F4F'}">
            <el-table-column prop="id" align="center" label="订单编号">
            </el-table-column>
            <el-table-column prop="userId" align="center" label="客户编号">
            </el-table-column>
            <el-table-column prop="userName" align="center" label="客户姓名">
            </el-table-column>
            <el-table-column prop="phoneNum" align="center" label="客户电话" width="100px">
            </el-table-column>
            <el-table-column prop="cliNeeds" align="center" label="需求量">
            </el-table-column>
            <el-table-column prop="cliX" align="center" label="地址横坐标">
            </el-table-column>
            <el-table-column prop="cliY" align="center" label="地址纵坐标">
            </el-table-column>
            <el-table-column prop="cliStart" align="center" label="最早收货时间" width="92px">
            </el-table-column>
            <el-table-column prop="cliEnd" align="center" label="最晚收货时间"width="92px">
            </el-table-column>
            <el-table-column prop="price" align="center" label="订单价格">
            </el-table-column>
            <el-table-column prop="arrivalTime" align="center" label="到达时间">
            </el-table-column>
            <el-table-column prop="compensation" align="center" label="超时赔付">
            </el-table-column>
            <el-table-column prop="state" align="center" label="运输状态">
            </el-table-column>
            <el-table-column prop="driverId" align="center" label="配送员编号">
            </el-table-column>
            <el-table-column prop="driverName" align="center" label="配送员姓名">
            </el-table-column>
            <el-table-column prop="driverPhone" align="center" label="配送员电话" width="100px">
            </el-table-column>
            <el-table-column align="center" label="订单操作" width="146px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="needUpdate(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" @click="needDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!--分页工具条-->
    <el-pagination
            class="pagination"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <h2>配送数据</h2>
    <!--配送数据表格-->
    <el-table size="small" current-row-key="id" :data="deliveryTable"
              style="border-radius: 10px" :header-cell-style="{color:'#2F4F4F'}">
        <el-table-column prop="truck" align="center" label="货车数量">
        </el-table-column>
        <el-table-column prop="loading" align="center" label="货车载重量(t)" width="95px">
        </el-table-column>
        <el-table-column prop="speed" align="center" label="货车速度(km/h)" width="115px">
        </el-table-column>
        <el-table-column prop="cost" align="center" label="行驶成本(￥/km)" width="115px">
        </el-table-column>
        <el-table-column prop="punish" align="center" label="超时赔付金(￥/h)" width="115px">
        </el-table-column>
        <el-table-column prop="priceKm" align="center" label="每公里运费(￥/km)" width="130px">
        </el-table-column>
        <el-table-column prop="priceT" align="center" label="每吨运费(￥/t)" width="100px">
        </el-table-column>
        <el-table-column prop="deportX" align="center" label="仓库横坐标(km)" width="110px">
        </el-table-column>
        <el-table-column prop="deportY" align="center" label="仓库纵坐标(km)" width="110px">
        </el-table-column>
        <el-table-column prop="adminName" align="center" label="值班管理员姓名" width="105px">
        </el-table-column>
        <el-table-column prop="adminPhone" align="center" label="值班管理员电话" width="105px">
        </el-table-column>
        <el-table-column prop="registrationCode" align="center" label="管理员注册码" width="95px">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="deliveryUpdate()">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <h2>遗传算法参数</h2>
    <!--遗传算法参数表格-->
    <el-table size="small" current-row-key="id" :data="geneticTable"
              style="border-radius: 10px" :header-cell-style="{color:'#2F4F4F'}">
        <el-table-column prop="popuNum" align="center" label="种群数量">
        </el-table-column>
        <el-table-column prop="geneNum" align="center" label="遗传代数">
        </el-table-column>
        <el-table-column prop="crosRate" align="center" label="交叉率">
        </el-table-column>
        <el-table-column prop="mutaRate" align="center" label="变异率">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="geneticUpdate()">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--修改配送数据对话框表单-->
    <el-dialog title="修改配送数据" :visible.sync="dialogVisibleEditDeli" width="30%">
        <el-form ref="form" :model="delivery" label-width="100px" class="insert">
            <el-form-item label="货车数量:">
                <el-input v-model="delivery.truck" placeholder="单位：辆"></el-input>
            </el-form-item>
            <el-form-item label="货车载重量:">
                <el-input v-model="delivery.loading" placeholder="单位：t"></el-input>
            </el-form-item>
            <el-form-item label="货车速度:">
                <el-input v-model="delivery.speed" placeholder="单位：km/h"></el-input>
            </el-form-item>
            <el-form-item label="行驶成本:">
                <el-input v-model="delivery.cost" placeholder="单位：￥"></el-input>
            </el-form-item>
            <el-form-item label="超时赔付金:">
                <el-input v-model="delivery.punish" placeholder="单位：￥"></el-input>
            </el-form-item>
            <el-form-item label="每公里运费:">
                <el-input v-model="delivery.priceKm" placeholder="单位：￥"></el-input>
            </el-form-item>
            <el-form-item label="每吨运费:">
                <el-input v-model="delivery.priceT" placeholder="单位：￥"></el-input>
            </el-form-item>
            <el-form-item label="仓库横坐标:">
                <el-input v-model="delivery.deportX" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="仓库纵坐标:">
                <el-input v-model="delivery.deportY" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="值班管理员姓名:">
                <el-input v-model="delivery.adminName"></el-input>
            </el-form-item>
            <el-form-item label="值班管理员电话:">
                <el-input v-model="delivery.adminPhone"></el-input>
            </el-form-item>
            <el-form-item label="管理员注册码:">
                <el-input v-model="delivery.registrationCode"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="deliveryModify()">确定</el-button>
                <el-button @click="cancel()" class="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改遗传算法参数对话框表单-->
    <el-dialog title="修改遗传算法参数" :visible.sync="dialogVisibleEditGene" width="30%">
        <el-form ref="form" :model="genetic" label-width="100px" class="insert">
            <el-form-item label="种群数量:">
                <el-input v-model="genetic.popuNum" placeholder="单位：t"></el-input>
            </el-form-item>
            <el-form-item label="遗传代数:">
                <el-input v-model="genetic.geneNum" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="交叉率:">
                <el-input v-model="genetic.crosRate" placeholder="单位：km"></el-input>
            </el-form-item>
            <el-form-item label="变异率:">
                <el-input v-model="genetic.mutaRate" placeholder="单位：h"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="geneticModify()">确定</el-button>
                <el-button @click="cancel()" class="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <h2>遗传算法优化路径</h2>
    <div class="res">
    <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder=""
              readonly class="results" v-model="textarea">
    </el-input>
    </div>
    <div>
        <el-button type="primary" style="margin-top: 10px" class="count" @click="calculate()">开&nbsp始&nbsp计&nbsp算</el-button>
    </div>
    <h2>路径管理</h2>
    <!--路径数据表格-->
    <el-table size="small" current-row-key="id" :data="pathTable"
              style="border-radius: 10px;margin-bottom: 40px" :header-cell-style="{color:'#2F4F4F'}">
        <el-table-column prop="id" align="center" label="路径编号">
        </el-table-column>
        <el-table-column prop="route" align="center" label="路径序列">
        </el-table-column>
        <el-table-column prop="totalDist" align="center" label="总路程">
        </el-table-column>
        <el-table-column prop="currDist" align="center" label="当前路程">
        </el-table-column>
        <el-table-column prop="plateNum" align="center" label="车牌号">
        </el-table-column>
        <el-table-column prop="truckName" align="center" label="货车名字">
        </el-table-column>
        <el-table-column prop="truckType" align="center" label="货车类型">
        </el-table-column>
        <el-table-column prop="driverId" align="center" label="配送员编号">
        </el-table-column>
        <el-table-column prop="driverName" align="center" label="配送员姓名">
        </el-table-column>
        <el-table-column prop="driverPhone" align="center" label="配送员电话">
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="pathUpdate(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--修改路径数据对话框表单-->
    <el-dialog title="修改路径信息" :visible.sync="dialogVisible" width="30%">
        <el-form ref="form" :model="pathFrom" label-width="100px" class="insert">
            <el-form-item label="路径编号:">
                <el-input v-model="pathFrom.id" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="路径序列:">
                <el-input v-model="pathFrom.route" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="总路程:">
                <el-input v-model="pathFrom.totalDist" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="车牌号:">
                <el-input v-model="pathFrom.plateNum"></el-input>
            </el-form-item>
            <el-form-item label="货车名字:">
                <el-input v-model="pathFrom.truckName"></el-input>
            </el-form-item>
            <el-form-item label="货车类型:">
                <el-input v-model="pathFrom.truckType"></el-input>
            </el-form-item>
            <el-form-item label="配送员编号:">
                <el-input v-model="pathFrom.driverId"></el-input>
            </el-form-item>
            <el-form-item label="配送员姓名:">
                <el-input v-model="pathFrom.driverName"></el-input>
            </el-form-item>
            <el-form-item label="配送员电话:">
                <el-input v-model="pathFrom.driverPhone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pathModify()">确定</el-button>
                <el-button @click="cancel()" class="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/admin.js"></script>


</body>
</html>